<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 宠物家政服务</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/auth.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<header class="header">
    <div class="container">
        <div class="logo">
            <i class="fas fa-paw"></i>
            <span>宠物家政</span>
        </div>
        <nav class="nav">
            <a href="index.html" class="nav-link">首页</a>
            <a href="services.html" class="nav-link">服务预约</a>
            <a href="orders.html" class="nav-link">我的订单</a>
            <a href="profile.html" class="nav-link">个人中心</a>
        </nav>
        <div class="user-actions">
            <a href="login.html" class="btn btn-outline">登录</a>
            <a href="register.html" class="btn btn-primary active">注册</a>
        </div>
    </div>
</header>

<main class="main">
    <div class="auth-container">
        <div class="auth-card">
            <div class="auth-header">
                <h1>创建账户</h1>
                <p>请填写以下信息完成注册</p>
            </div>

            <form id="register-form" class="register-form active">
                <div class="form-group">
                    <label for="reg-username" class="form-label">用户名</label>
                    <div class="input-group">
                        <i class="fas fa-user"></i>
                        <input type="text" id="reg-username" class="form-input" placeholder="请输入用户名" required minlength="3" maxlength="20">
                    </div>
                </div>

                <div class="form-group">
                    <label for="reg-email" class="form-label">邮箱</label>
                    <div class="input-group">
                        <i class="fas fa-envelope"></i>
                        <input type="email" id="reg-email" class="form-input" placeholder="请输入邮箱地址" required>
                    </div>
                </div>

                <div class="form-group">
                    <label for="reg-password" class="form-label">密码</label>
                    <div class="input-group">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="reg-password" class="form-input" placeholder="请输入密码" required minlength="6" maxlength="20">
                        <button type="button" class="toggle-password"><i class="fas fa-eye"></i></button>
                    </div>
                </div>

                <div class="form-group">
                    <label for="reg-confirm-password" class="form-label">确认密码</label>
                    <div class="input-group">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="reg-confirm-password" class="form-input" placeholder="请再次输入密码" required minlength="6" maxlength="20">
                        <button type="button" class="toggle-password"><i class="fas fa-eye"></i></button>
                    </div>
                </div>

                <div class="form-options">
                    <label class="checkbox-label">
                        <input type="checkbox" id="agree-terms" required>
                        <span class="checkmark"></span>
                        我已阅读并同意 <a href="#" class="terms-link">《用户协议》</a> 和 <a href="#" class="terms-link">《隐私政策》</a>
                    </label>
                </div>

                <button type="submit" class="btn btn-primary btn-full">注册</button>
            </form>

            <div class="auth-footer">
                <p>已有账户？ <a href="login.html">立即登录</a></p>
            </div>

            <!-- 第三方注册 -->
            <div class="social-login">
                <div class="divider">
                    <span>或使用以下方式注册</span>
                </div>
                <div class="social-buttons">
                    <button class="social-btn wechat">
                        <i class="fab fa-weixin"></i>
                        微信注册
                    </button>
                    <button class="social-btn qq">
                        <i class="fab fa-qq"></i>
                        QQ注册
                    </button>
                </div>
            </div>
        </div>
    </div>
</main>

<footer class="footer">
    <div class="container">
        <div class="footer-content">
            <div class="footer-section">
                <h3>联系我们</h3>
                <p><i class="fas fa-phone"></i> 400-123-4567</p>
                <p><i class="fas fa-envelope"></i> service@petcare.com</p>
            </div>
            <div class="footer-section">
                <h3>服务时间</h3>
                <p>周一至周日 8:00-20:00</p>
                <p>24小时在线客服</p>
            </div>
            <div class="footer-section">
                <h3>关注我们</h3>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 宠物家政上门服务. 保留所有权利.</p>
        </div>
    </div>
</footer>

<script>
    // 密码可见切换
    document.querySelectorAll('.toggle-password').forEach(btn => {
        btn.addEventListener('click', function() {
            const input = btn.previousElementSibling;
            if (input.type === 'password') {
                input.type = 'text';
                btn.innerHTML = '<i class="fas fa-eye-slash"></i>';
            } else {
                input.type = 'password';
                btn.innerHTML = '<i class="fas fa-eye"></i>';
            }
        });
    });
    // 表单校验
    document.getElementById('register-form').addEventListener('submit', async function(e) {
        e.preventDefault();
        const username = document.getElementById('reg-username').value.trim();
        const email = document.getElementById('reg-email').value.trim();
        const pwd = document.getElementById('reg-password').value;
        const pwd2 = document.getElementById('reg-confirm-password').value;
        if (pwd !== pwd2) {
            alert('两次输入的密码不一致！');
            return;
        }
        if (!/^\w{3,20}$/.test(username)) {
            alert('用户名格式不正确（3-20位字母数字下划线）');
            return;
        }
        if (!/^\S+@\S+\.\S+$/.test(email)) {
            alert('邮箱格式不正确');
            return;
        }
        if (pwd.length < 6) {
            alert('密码长度不能少于6位');
            return;
        }
        // 调用后端API注册
        try {
            const resp = await fetch('http://localhost:8080/api/user/register', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    username: username,
                    password: pwd,
                    email: email
                })
            });
            const data = await resp.json();
            if (data.success) {
                alert('注册成功！');
                window.location.href = 'login.html';
            } else {
                alert(data.message || '注册失败');
            }
        } catch (err) {
            alert('网络错误或服务器异常');
        }
    });
</script>
</body>
</html>